<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>开关按钮</title>
    <link rel="stylesheet" href="">
    <style>
    .box{
    
        width: 120px;
        height: 60px;
        border-radius: 30px;

        position: relative;
    }
    #btn{
        display: none;
    }
    .box .circle{
        height: 60px;
        width: 60px;
        border-radius: 50%;
        background-color: #fff;
        transition: 0.5s;
        box-shadow: inset 0 0 1px gray;
        
    }
    .box input:checked+.circle{
        transform: translateX(60px);;
    }
    .box label{
        width: 120px;
        height: 60px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 5;
        border-radius: 30px;
    }
    .foot{
        width: 120px;
        height: 60px;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 30px;
        z-index: -1;
        background-color: rgb(184, 182, 182);
        transition: 0.5s;
    }
    .box input:checked~.foot{
        background-color: rgb(153, 228, 144);
    }
    
    </style>
</head>
<body>
    <div class="box">
        <label for="btn"></label>
        <input type="checkbox" id="btn">
        <div class="circle"></div>
        <div class="foot"></div>    
    </div>
    <hr>
    <!-- /* -----第二种--- */ -->
    <style>
        .switch-btn{
            display: block;
            height: 60px;
            width: 120px;
            border-radius: 30px;
            position: relative;
        }
        .switch-btn input{
            display: none;
        }
        .switch-btn .circle{
            width: 60px;
            height: 60px;
            background-color: rgb(255, 255, 255);
            border-radius: 50%;
            transition: 0.5s;
            box-shadow: 0px 0px 1px 1px gray;
        }
        .switch-btn input:checked~.circle{
            transform: translate(60px);
        } 
        .switch-btn .btn-bg{
            height: 60px;
            width: 120px;
            background-color: rgb(163, 163, 163);
            border-radius: 30px;
            position: absolute;
            left: 0;
            top:0;
            z-index: -1;
            transition: 0.5s;
        }
        .switch-btn .btn-bg1{
            height: 5px;
            width: 120px;
            background-color: rgb(163, 163, 163);
            border-radius: 30px;
            position: absolute;
            left: 0;
            top:25px;
            z-index: -1;
            transition: 0.5s;
        }
        .switch-btn input:checked~.btn-bg{
            background-color: rgb(116, 224, 170);
        }
        .switch-btn input:checked~.btn-bg1{
            background-color: rgb(116, 224, 170);
        }
    </style>
    <label for="switch" class="switch-btn">
        <input type="checkbox" id="switch">
        <div class="circle"></div>
        <div class="btn-bg"></div>
    </label>
    <hr>
    <label for="switch1" class="switch-btn">
            <input type="checkbox" id="switch1">
            <div class="circle"></div>
            <div class="btn-bg"></div>
        </label>
    <hr>
    <label for="switch2" class="switch-btn">
            <input type="checkbox" id="switch2">
            <div class="circle"></div>
            <div class="btn-bg1"></div>
        </label>
</body>
</html>